<template>

  <div>

    <div class="productDe">
      <van-nav-bar
          title="详情"
          left-text="返回"
          left-arrow
          @click-left="onClickLeft"
      />
      <div class="img" v-if="product_detail.images">
        <img :src="product_detail.images[0].file" alt="">
      </div>

      <div class="pr-body">
        <div class="pirce" v-if="product_detail.stock_record">
          {{product_detail.stock_record[0].price[0].price|prices}}
        </div>
        <div class="title" v-if="product_detail">
          {{product_detail.title}}
        </div>
        <div class="desc" v-if="product_detail">
          {{product_detail.description}}
        </div>

        <van-stepper v-model="basket_data.quantity" theme="round" button-size="22" disable-input  min="1" integer/>

        <div class="stock" v-if="product_detail"></div>
      </div>




    </div>
    <div class="bottumber"><bottumbar :basketdata="basket_data"></bottumbar>
    </div>
  </div>


</template>

<script>
import { mapState, mapMutations, mapActions, mapGetters } from "vuex";
import bottumbar from "../../components/detail/bottumbar";

import Ax from "./axios"

const ax = new Ax()


export default {
  name: "ProductDetail",
  data(){
    return {
      product_detail:{},
      basket_data:{
        num:1,
        product_id:0,
        pay_type: "Rmb",
        status: "Pre",
        choice: true
      }

    }
  },
  components:{
    bottumbar
  },
  created() {
    //拿到商品详情数据
      this.getDetail(this.$route.query.product_id)
  },
  methods:{
    ...mapActions("model", []),
    ...mapMutations("model", []),
    getDetail(product_id){
      this.basket_data.product_id = product_id
      ax.detailData(product_id).then(response=>{
        this.product_detail = response.data
        })

    },

    onClickLeft(){
      this.$router.go(-1)
    }
  },
  filters:{
    prices(val){
      return "¥" + val
    }
  },
  computed:{
    ...mapGetters("model", []),
    ...mapState("model", [])
  }
}
</script>

<style scoped lang="less">

  .img{
    width: 100%;
    height: 300px;
    img{
      width: 100%;
      height: 100%;
    }
  }

  .pr-body{
    height: 200px;
    margin-top: 40px;
    box-sizing: border-box;
    padding-left: 10px;
    padding-right: 10px;
    position: relative;
    .pirce{
      height: 30px;
      font-size: 30px;
      color: red;
    }
    .title{
      font-size: 20px;
      margin-top: 10px;
      margin-bottom: 10px;

    }
    .desc{
      font-size: 15px;
      color: gray;
      margin-bottom: 30px;
    }
    .stock{
      font-size: 20px;
      margin-top: 20px;
    }

  }

</style>